<template>
    <div class="Shop">
        <H4 style="margin-bottom: 20px;">店铺信息</H4>
        <el-form label-width="70px">
            <el-form-item label="边距" label-width="60px">
                <div style="display: flex;">
                    <div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">上:</span>
                            <el-input type="number" v-model="list.Upper" style="width: 80px;"></el-input>
                        </div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">下:</span>
                            <el-input v-model="list.Lower" style="width: 80px;"></el-input>
                        </div>
                    </div>
                    <div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">右:</span>
                            <el-input v-model="list.Right" style="width: 80px;"></el-input>
                        </div>
                        <div>
                            <span style="padding:0 10px;">左:</span>
                            <el-input v-model="list.Left" style="width: 80px;"></el-input>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="背景颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.BgColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.BgColor ='#fff'}">重置</el-button>
                </div>
            </el-form-item>
            <el-form-item label="样式">
                <div style="display: flex;align-items: center;margin-top: 6px;">
                    <el-radio-group v-model="list.Style" size="small">
                        <el-radio-button label="One">直角</el-radio-button>
                        <el-radio-button label="Two">圆角</el-radio-button>
                    </el-radio-group>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'Shop',
        props: ['data'],
        data() {
            return {
                list: {}
            }
        },
        watch: {
            'list': {
                handler(newValue, oldValue) {
                    // console.log('变动之前的值:' , oldValue);
                    // console.log('变动后的值：', newValue);
                    this.list.Upper = newValue.Upper != '' ? newValue.Upper * 1 : 0
                    this.list.Lower = newValue.Lower != '' ? newValue.Lower * 1 : 0
                    this.list.Right = newValue.Right != '' ? newValue.Right * 1 : 0
                    this.list.Left = newValue.Left != '' ? newValue.Left * 1 : 0
                },
                // 深度监听 监听对象，数组的变化
                deep: true
            },
        },
        mounted() {
            this.list = this.data
        }
    }
</script>

<style lang="less" scoped>
    .Shop {
        padding: 0 20px;
    }
</style>